<template>
	<view @touchmove.prevent.stop>
		<u-popup class="popup-type" :show="goodsSkuPop" @close="closeFn" mode="bottom">
			<view class="py-[32rpx] relative" v-if="goodsDetail.detail" @touchmove.prevent.stop>
				<view class="flex px-[32rpx] mb-[40rpx]">
					<view class="w-[180rpx] h-[180rpx]">
						<u--image width="180rpx" height="180rpx" :radius="'var(--goods-rounded-big)'"
							:src="img(goodsDetail.detail.sku_image)" @click="imgListPreview(goodsDetail.detail.sku_image)"
							model="aspectFill">
							<template #error>
								<image class="w-[180rpx] h-[180rpx] rounded-[var(--goods-rounded-big)] overflow-hidden"
									:src="img('static/resource/images/diy/shop_default.jpg')" mode="aspectFill"></image>
							</template>
						</u--image>
					</view>
					<view class="flex flex-1 flex-col justify-between ml-[20rpx] py-[10rpx]">
						<view class="w-[100%]">
							<view class="text-[var(--price-text-color)] flex items-baseline">
								<text class="price-font" v-if="goodsDetail.point">
									<text class="text-[44rpx]">{{ goodsDetail.point }}</text>
									<text class="text-[38rpx]">{{ t('point') }}</text>
								</text>
								<text class="text-[38rpx]" v-if="goodsDetail.point && parseFloat(goodsDetail.price)">+</text>
								<template v-if="goodsDetail.point && parseFloat(goodsDetail.price)">
									<text class="text-[44rpx] price-font">{{ parseFloat(fen2yuan(goodsDetail.price)).toFixed(2) }}</text>
									<text class="text-[38rpx] price-font">元</text>
								</template>
								<template v-if="!goodsDetail.point && !parseFloat(goodsDetail.price)">
									<text class="text-[26rpx] price-font">￥</text>
									<text class="text-[44rpx] price-font">{{ parseFloat(goodsDetail.price).toFixed(2).split('.')[0]
									}}</text>
									<text class="text-[26rpx] mr-[6rpx] price-font">.{{ parseFloat(goodsPrice).toFixed(2).split('.')[1]
									}}</text>
								</template>

							</view>
							<view class="text-[26rpx] leading-[32rpx] text-[var(--text-color-light6)] mt-[10rpx]">
								库存{{ goodsDetail.detail.stock }}{{ goodsDetail.goods.unit }}</view>
						</view>
						<view
							class="text-[26rpx] leading-[30rpx] text-[var(--text-color-light6)] w-[100%] max-h-[60rpx] multi-hidden"
							v-if="goodsDetail.goodsSpec && goodsDetail.goodsSpec.length">已选规格：{{ goodsDetail.detail.sku_spec_format }}
						</view>
					</view>
				</view>
				<scroll-view class="h-[500rpx] px-[32rpx] box-border mb-[60rpx]" scroll-y="true">
					<view :class="{ 'mt-[20rpx]': 0 != index }" v-for="(item, index) in goodsDetail.goodsSpec" :key="index">
						<view class="text-[28rpx] leading-[36rpx] mb-[24rpx]">{{ item.spec_name }}</view>
						<view class="flex flex-wrap">
							<view
								class="box-border bg-[var(--temp-bg)] text-[24rpx] px-[44rpx] text-center h-[56rpx] flex-center mr-[20rpx] mb-[20rpx] border-1 border-solid rounded-[50rpx] border-[var(--temp-bg)]"
								:class="{ '!border-[var(--primary-color)] text-[var(--primary-color)] !bg-[var(--primary-color-light)]': subItem.selected }"
								v-for="(subItem, subIndex) in item.values" :key="subIndex" @click="change(subItem, index)">
								{{ subItem.name }}
							</view>
						</view>
					</view>
					<view class="flex justify-between items-center mt-[8rpx]">
						<view class="text-[28rpx]">购买数量</view>
						<text v-if="goodsDetail.detail.limit_num > 0"
							class="ml-[20rpx] mr-[auto] text-[24rpx] text-[var(--primary-color)]">(限购{{ goodsDetail.detail.limit_num
							}}{{
								goodsDetail.goods.unit }})</text>
						<u-number-box :min="1"
							:max="parseInt(goodsDetail.detail.limit_num) < goodsDetail.stock ? parseInt(goodsDetail.detail.limit_num) : goodsDetail.stock"
							integer :step="1" input-width="68rpx" v-model="buyNum" input-height="52rpx">
							<template #minus>
								<text class="text-[30rpx] nc-iconfont nc-icon-jianV6xx font-500"
									:class="{ '!text-[var(--text-color-light9)]': buyNum <= 1 }"></text>
							</template>
							<template #input>
								<input
									class="text-[#303133] text-[28rpx] mx-[10rpx] w-[80rpx] h-[44rpx] bg-[var(--temp-bg)] leading-[44rpx] text-center rounded-[6rpx]"
									type="number" @input="goodsSkuInputFn" @blur="goodsSkuBlurFn" v-model="buyNum" />
							</template>
							<template #plus>
								<text class="text-[30rpx] nc-iconfont nc-icon-jiahaoV6xx font-500"
									:class="{ '!text-[var(--text-color-light9)]': buyNum >= goodsDetail.stock || buyNum == parseInt(goodsDetail.detail.limit_num) }"></text>
							</template>
						</u-number-box>
					</view>
				</scroll-view>
				<view class="px-[20rpx]">
					<!-- #ifdef APP-PLUS -->
					<button v-if="goodsDetail.detail.stock > 0" hover-class="none"
						class="!h-[80rpx] primary-btn-bg leading-[80rpx] text-[26rpx] rounded-[50rpx] font-500" type="primary"
						@click="confirm">确定</button>
					<!-- #endif -->
					<!-- #ifdef H5 -->
					<button v-if="goodsDetail.detail.stock > 0" hover-class="none"
						class="!h-[80rpx] primary-btn-bg leading-[80rpx] text-[26rpx] rounded-[50rpx] font-500" type="primary"
						@click="confirm">确定</button>
					<!-- #endif -->

					<!-- #ifdef MP-WEIXIN -->
					<template v-if="goodsDetail.detail.stock > 0">
						<button v-if="isBindMobile && userInfo && !userInfo.mobile" hover-class="none"
							class="!h-[80rpx] primary-btn-bg leading-[80rpx] text-[26rpx] rounded-[50rpx] font-500" type="primary"
							open-type="getPhoneNumber" @getphonenumber="memberStore.bindMobile">确定</button>
						<button v-else hover-class="none"
							class="!h-[80rpx] primary-btn-bg leading-[80rpx] text-[26rpx] rounded-[50rpx] font-500" type="primary"
							@click="confirm">确定</button>
					</template>
					<!-- #endif -->

					<button hover-class="none" v-else
						class="!h-[80rpx] leading-[80rpx] text-[26rpx] text-[#fff] bg-[#ccc] rounded-[50rpx] font-500">已售罄</button>
				</view>
			</view>
		</u-popup>
		<!-- 强制绑定手机号 -->
		<bind-mobile ref="bindMobileRef" />
	</view>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from 'vue';
import { img, redirect, getToken } from '@/utils/common'
import bindMobile from '@/components/bind-mobile/bind-mobile.vue';
import { useLogin } from '@/hooks/useLogin'
import useMemberStore from '@/stores/member'
import { t } from '@/locale';
import { cloneDeep } from 'lodash-es'
import { fen2yuan } from '@/utils/formatting';

const props = defineProps(['goodsDetail']);
const goodsSkuPop = ref(false);
const callback: any = ref(null);
const currSpec: any = ref({
	skuId: "",
	name: []
})
const openType = ref("");
const buyNum = ref(1)

// 商品价格
const goodsPrice = computed(() => {
	let price = "0.00";
	if (Object.keys(goodsDetail.value).length && Object.keys(goodsDetail.value.goods).length && goodsDetail.value.goods.member_discount && getToken() && goodsDetail.value.member_price != goodsDetail.value.price) {
		// 会员价
		price = goodsDetail.value.member_price ? goodsDetail.value.member_price : goodsDetail.value.price;
	} else {
		price = goodsDetail.value.price
	}
	return price;
})

const goodsSkuInputFn = () => {
	setTimeout(() => {
		if (!buyNum.value || buyNum.value <= 0) {
			buyNum.value = 1;
		}
		if (buyNum.value >= Number(goodsDetail.value.detail.limit_num)) {
			buyNum.value = goodsDetail.value.detail.limit_num;
		}
	}, 0)
}

const goodsSkuBlurFn = () => {
	setTimeout(() => {
		if (!buyNum.value || buyNum.value <= 0) {
			buyNum.value = 1;
		}
		if (buyNum.value >= Number(goodsDetail.value.detail.limit_num)) {
			buyNum.value = goodsDetail.value.detail.limit_num;
		}
	}, 0)
}

// 会员信息
const memberStore = useMemberStore()
const userInfo = computed(() => memberStore.info)

const open = (type = "", fn = "") => {
	openType.value = type;
	goodsSkuPop.value = true;
	callback.value = fn;
}

const closeFn = () => {
	goodsSkuPop.value = false
}

const goodsDetail = computed(() => {
	let data = cloneDeep(props.goodsDetail);

	// 重组数据结构
	if (Object.keys(data).length) {

		if (!Object.keys(currSpec.value.name).length) currSpec.value.name = data.sku_spec_format.split(",");

		data.goodsSpec.forEach((item: any, index: any) => {
			let specName = item.spec_values.split(",");
			item.values = [];
			specName.forEach((specItem: any, specIndex: any) => {
				item.values[specIndex] = {};
				item.values[specIndex].name = specItem;
				item.values[specIndex].selected = false;
				item.values[specIndex].disabled = false;

				// 选中规格
				currSpec.value.name.forEach((currSpecItem, currSpecIndex) => {
					if (currSpecIndex == index && currSpecItem == specItem) {
						item.values[specIndex].selected = true;
					}
				})
			})
		})
		getSkuId();

		// 当前详情内容
		if (data.skuList && Object.keys(data.skuList).length) {
			data.skuList.forEach((idItem: any, idIndex: any) => {
				if (idItem.sku_id == currSpec.value.skuId) {
					data.detail = idItem;
				}
			})
		}
	}
	return data;
})

const change = (data: any, index: any) => {
	currSpec.value.name[index] = data.name;
	buyNum.value = 1
	getSkuId();
}

const emits = defineEmits(['change'])
const getSkuId = () => {
	props.goodsDetail.skuList.forEach((skuItem: any, skuIndex: any) => {
		if (skuItem.sku_spec_format == currSpec.value.name.toString()) {
			currSpec.value.skuId = skuItem.sku_id
			emits('change', skuItem.sku_id)
		}
	})
}

//强制绑定手机号
const bindMobileRef: any = ref(null)
const isBindMobile = ref(uni.getStorageSync('isbindmobile'))

const confirm = () => {
	// 检测是否登录
	if (!userInfo.value) {
		useLogin().setLoginBack({ url: '/addon/shop/pages/point/detail', param: { id: goodsDetail.value.exchange_id } })
		return false
	}

	// #ifdef H5
	// 绑定手机号
	if (uni.getStorageSync('isbindmobile')) {
		bindMobileRef.value.open()
		return false
	}
	// #endif

	// 立即购买
	var data = {
		skuId: goodsDetail.value.sku_id,
		count: buyNum.value
	};
	uni.setStorage({
		key: 'orderCreateData',
		data: {
			items: [
				data
			],
			extend_data: {
				point_activity_id: goodsDetail.value.pointActivity.id,
				activity_type: goodsDetail.value.type, // 目前营销活动有，拼团价 秒杀 积分

			}
		},
		success: () => {
			redirect({ url: '/addon/shop/pages/point/payment' })
		}
	});
	// var data = {
	// 	sku_id: goodsDetail.value.sku_id,
	// 	num: buyNum.value
	// };

	// uni.setStorage({
	// 	key: 'orderCreateData',
	// 	data: {
	// 		sku_data: [
	// 			data
	// 		]
	// 	},
	// 	success: () => {
	// 		redirect({ url: '/addon/shop/pages/point/payment' })
	// 	}
	// });

	closeFn();
}

//预览图片
const imgListPreview = (item: any) => {
	if (item === '') return false
	var urlList = []
	urlList.push(img(item))  //push中的参数为 :src="item.img_url" 中的图片地址
	uni.previewImage({
		indicator: "number",
		loop: true,
		urls: urlList
	})
}

defineExpose({
	open
})
</script>

<style lang="scss" scoped>
.popup-type {
	:deep(.u-popup__content) {
		border-top-left-radius: 16rpx;
		border-top-right-radius: 16rpx;
		overflow: hidden;
	}
}

// 防止覆盖住图片放大
.u-popup :deep(.u-transition) {
	z-index: 999 !important;
}

::v-deep .u-number-box .u-number-box__slot {
	display: flex;
	align-items: center;
}
</style>
